<template>
  <div>
    <!-- 边框 -->
    <el-card class="box-card" style="margin-top: 10px">
      <!-- 搜索框 -->
      <div class="search">
        <el-input
          placeholder="请输入内容"
          v-model="input"
          class="input-with-select"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="search"
          ></el-button>
        </el-input>
        <el-button class="add" type="primary" @click="dialogFormVisible = true"
          >添加商品</el-button
        >
      </div>
      <!-- 搜索框 -->
      <!-- 表格 -->
      <el-table :data="all" border style="width: 100%">
        <!-- # -->
        <el-table-column type="index" label="#" width="50"> </el-table-column>
        <!-- 商品名称 -->
        <el-table-column prop="goods_name" label="商品名称" width="480">
        </el-table-column>
        <!-- 商品价格(元) -->
        <el-table-column prop="goods_price" label="商品价格(元)" width="180">
        </el-table-column>
        <!-- 商品重量 -->
        <el-table-column prop="goods_weight" label="商品重量" width="180">
        </el-table-column>
        <!-- 创建时间 -->
        <el-table-column prop="add_time" label="创建时间" width="180">
          <template slot-scope="scope">
            {{ new Date(scope.row.add_time).toLocaleString() }}
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 编辑 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              @click="handleEdit(scope.row)"
            ></el-button>
            <!-- 删除 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格 -->
      <!-- 分页 -->
      <div class="block">
        <!-- <span class="demonstration">完整功能</span> -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pagenum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="params.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="list.length"
        >
        </el-pagination>
      </div>
      <!-- 分页 -->
      <!-- 对话框添加 -->
      <el-dialog title="添加商品" :visible.sync="dialogFormVisible">
        <!-- 内容 -->
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <!-- 商品名称 -->
          <el-form-item label="商品名称" prop="goods_name">
            <el-input v-model="ruleForm.goods_name"></el-input>
          </el-form-item>
          <!-- 商品价格 -->
          <el-form-item label="商品价格" prop="goods_price">
            <el-input type="number" v-model="ruleForm.goods_price"></el-input>
          </el-form-item>
          <!-- 商品数量 -->
          <el-form-item label="商品数量" prop="goods_number">
            <el-input type="number" v-model="ruleForm.goods_number"></el-input>
          </el-form-item>
          <!-- 商品重量 -->
          <el-form-item label="商品重量" prop="goods_weight">
            <el-input type="number" v-model="ruleForm.goods_weight"></el-input>
          </el-form-item>
          <!-- 图片 -->
          <el-form-item label="商品图片" prop="goods_weight">
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="3"
              :on-exceed="handleExceed"
              :file-list="fileList"
            >
              <el-button size="small" type="primary" class="img"
                >点击上传</el-button
              >
            </el-upload>
          </el-form-item>
        </el-form>
        <!-- 内容 -->
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="add('ruleForm')">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 对话框添加 -->
      <!-- 对话框编辑 -->
      <el-dialog title="添加商品" :visible.sync="dialogFormVisible1">
        <!-- 内容 -->
        <el-form
          :model="ruleForm1"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <!-- 商品名称 -->
          <el-form-item label="商品名称" prop="goods_name">
            <el-input v-model="ruleForm1.goods_name"></el-input>
          </el-form-item>
          <!-- 商品价格 -->
          <el-form-item label="商品价格" prop="goods_price">
            <el-input type="number" v-model="ruleForm1.goods_price"></el-input>
          </el-form-item>
          <!-- 商品数量 -->
          <el-form-item label="商品数量" prop="goods_number">
            <el-input type="number" v-model="ruleForm1.goods_number"></el-input>
          </el-form-item>
          <!-- 商品重量 -->
          <el-form-item label="商品重量" prop="goods_weight">
            <el-input type="number" v-model="ruleForm1.goods_weight"></el-input>
          </el-form-item>
          <!-- 图片 -->
        </el-form>
        <!-- 内容 -->
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="edit()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 对话框编辑 -->
    </el-card>
    <!-- 边框 -->
  </div>
</template>

<script>
//引入
import { goods, goodDel, goodAdd, goodEdit,goodImg } from "@/request/api.js";
export default {
  data() {
    return {
      //图片
      fileList: [],
      //表格
      tableData: [],
      //备份数据
      list: [],
      //搜索框定义
      input: "",
      //页码
      params: {
        query: "",
        pagenum: 1,
        pagesize: 10,
      },
      //对话框添加状态
      dialogFormVisible: false,
      //对话框编辑状态
      dialogFormVisible1: false,
      //对话框表单添加数据
      ruleForm: {
        goods_name: "",
        goods_price: "",
        goods_number: "",
        goods_weight: "",
        goods_cat: "1,2,3",
      },
      //对话框编辑数据
      ruleForm1: {
        goods_name: "",
        goods_price: "",
        goods_number: "",
        goods_weight: "",
        goods_cat: "1,2,3",
      },
      //对话框表单添加数据规则
      rules: {
        goods_name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],
        goods_price: [
          { required: true, message: "请输入商品价格", trigger: "blur" },
        ],
        goods_number: [
          { required: true, message: "请输入商品数量", trigger: "blur" },
        ],
        goods_weight: [
          { required: true, message: "请输入商品重量", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //页面数据
    goodsList() {
      goods(this.params).then((res) => {
        // console.log(res);
        this.tableData = res.data.data.goods;
        this.list = res.data.data.goods;
      });
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.params.pagesize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.pagenum = val;
    },
    //搜索
    search() {
      this.params.query = this.input;
      this.goodsList();
      this.$message({
        message: "搜索成功",
        type: "success",
      });
    },
    //编辑回填
    handleEdit(row) {
      console.log(row);
      this.ruleForm1 = row;
      this.dialogFormVisible1 = true;
      // this.ruleForm1.id = row.id
      // this.ruleForm1=row
      this.goods_cat = "1,2,3";
    },
    //编辑修改数据
    edit() {
      console.log(this.ruleForm1);
      let obj = {
        goods_cat: "1,2,3",
        ...this.ruleForm1,
      };
      goodEdit(obj).then((res) => {
        // console.log(res)
        this.$message({
          message: "商品信息修改完成",
          type: "success",
        });
        this.goodsList();
        this.dialogFormVisible1 = false;
      });
    },
    //删除
    handleDelete(row) {
      console.log(row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          goodDel(row).then((res) => {
            // console.log(res);
            this.goodsList();
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //计数器
    handleChange(value) {
      console.log(value);
    },
    //图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //添加
    add(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let obj = {
            ...this.ruleForm,
            goods_cat: "1,2,3",
          };
          goodAdd(obj).then((res) => {
            console.log(res);
            this.$message("添加成功");
          });
          this.dialogFormVisible = false;
          //添加对话框数据
          // console.log(this.goodsList)
          this.goodsList();
          // console.log(this.tableData);
          // alert('submit!');
          //清空数据
          this.ruleForm = {
            goods_name: "",
            goods_price: "",
            goods_number: "",
            goods_weight: "",
          };
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  created() {
    this.goodsList();
  },
  mounted() {},
  components: {},
  computed: {
    //分页
    all() {
      return (this.tableData = this.list.slice(
        (this.params.pagenum - 1) * this.params.pagesize,
        this.params.pagesize * this.params.pagenum
      ));
    },
  },
  watch: {},
};
</script>

<style lang='scss' scoped>
.search {
  margin: 10px 0;
  display: flex;
  width: 35%;
  .add {
    margin-left: 10px;
  }
}
.el-input-number {
  width: 100%;
}
.img {
  margin-right: 600px;
}
</style>
